<!-- eslint-disable vue/no-mutating-props -->
<template>
  <el-dialog title="用户钱包管理" v-model="props.visible" @close="close">
    <el-divider />
    <el-form ref="ruleFormRef" style="width: 93%;" :model="formData" :rules="rules" :label-width="200" status-icon>
      <el-form-item label="用户ID" prop="uid">
        <el-input v-model="formData.uid" placeholder="请输入用户ID" />
      </el-form-item>
      <el-form-item label="钱包地址" prop="address">
        <el-input v-model="formData.address" autocomplete="off" placeholder="请输入钱包地址" />
      </el-form-item>
      <el-form-item label="二维码地址" prop="address_qrcode">
        <el-input v-model="formData.address_qrcode" autocomplete="off" placeholder="请输入二维码地址" />
      </el-form-item>
    </el-form>
    <el-divider />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, watch, reactive, onMounted } from "vue";
import { validateInput } from "@/utils/index";
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  product: {
    type: Object as any,
    default: () => { }
  }
});

const emit = defineEmits(['close', 'submit', 'update']);
const ruleFormRef = ref<FormInstance>()
const rules = reactive({
  uid: [
    { required: true, message: '请输入用户id', trigger: 'blur' },
  ],
  address: [
    { required: true, message: '请输入钱包地址', trigger: 'blur' },
  ],
});

const formData = ref({
  uid: "", // 用户id
  address: "", // 钱包地址
  address_qrcode: "", // 二维码地址
});

// 
const close = () => {
  emit('close', false);
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (JSON.stringify(props.product) === '{}') {
        emit('submit', formData.value)
      } else {
        emit('update', formData.value)
      }
    }
  })
};

onMounted(() => {
  if (JSON.stringify(props.product) !== '{}') {
    formData.value = props.product
  }
})
</script>

<style></style>
